<template>
	<div class="matching">
		<TopInfo />
		<TopTabs />
		<div class="content">
			<div class="filter-part">
				<div class="search-part">
					<!-- <el-input
            placeholder="请输入关键词搜索"
            v-model="keywords"
            prefix-icon="el-icon-search"
            class="input-with-select"
          > -->
					<el-select
						v-model="keywords"
						filterable
						remote
						reserve-keyword
						placeholder="请输入关键词"
						:remote-method="remoteMethod"
						:loading="loading"
						class="search-select"
						@change="ChangeValue"
					>
						<el-option
							v-for="item in options"
							:key="item.EntId"
							:label="item.EntName"
							:value="item.EntName"
						>
						</el-option>
					</el-select>
					<!-- <el-button slot="append" type="primary">搜索</el-button> -->
					<!-- </el-input> -->
				</div>
			</div>
			<div class="match-count">
				为你查找到<span>{{ matchingData.length }}</span
				>条记录
			</div>
			<ul class="matching-list">
				<li
					@click="ToMatchingDetail(item)"
					v-for="item in matchingData"
					:key="item.Id"
				>
					<div class="line1">{{ item.ProductName }}</div>
					<div class="line2">地区：湖南省</div>
					<div class="line3">
						<span class="fl">受理部门：{{ item.ProSource }}</span>
						<span class="fr"
							>资助额度：{{ item.SupportAmount }}</span
						>
					</div>
					<div class="line4">
						<span class="fl">申报时间：{{ item.AppDate }}</span>
						<span class="fr"
							>匹配度：
							<i class="el-icon-star-on star"></i>
							<i class="el-icon-star-on star"></i>
							<i class="el-icon-star-on star"></i>
							<i class="el-icon-star-on star"></i>
							<i class="el-icon-star-on star"></i>
						</span>
					</div>
				</li>
			</ul>
		</div>
		<BottomInfo />
		<el-dialog
			title="补充完善信息，匹配将更加精准"
			:visible.sync="dialogVisible"
			width="1000px"
			center
		>
			<el-form :model="form">
				<el-row>
					<el-col :span="12">
						<el-form-item
							label="上年度营收"
							:label-width="formLabelWidth"
						>
							<el-input
								v-model="form.yearAmount"
								autocomplete="off"
								placeholder="单位万元"
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							label="上年度净资产"
							:label-width="formLabelWidth"
						>
							<el-input
								v-model="form.netAssets"
								autocomplete="off"
								placeholder="单位万元"
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							label="上年度研发费用"
							:label-width="formLabelWidth"
						>
							<el-input
								v-model="form.researchAmount"
								autocomplete="off"
								placeholder="单位万元"
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							label="上年年缴所得税"
							:label-width="formLabelWidth"
						>
							<el-input
								v-model="form.yearTax"
								autocomplete="off"
								placeholder="单位万元"
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							label="上年度备案投资额"
							:label-width="formLabelWidth"
						>
							<el-input
								v-model="form.investAmount"
								autocomplete="off"
								placeholder="单位万元"
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							label="上年度融资额"
							:label-width="formLabelWidth"
						>
							<el-input
								v-model="form.currentAmount"
								autocomplete="off"
								placeholder="单位万元"
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							label="是否有产学研"
							:label-width="formLabelWidth"
						>
							<el-radio-group v-model="form.iURAmount">
								<el-radio label="1">是</el-radio>
								<el-radio label="0">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							label="公司博士以上人才数量"
							:label-width="formLabelWidth"
						>
							<el-input
								v-model="form.staff"
								autocomplete="off"
								placeholder="单位个"
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							label="联系人"
							:label-width="formLabelWidth"
						>
							<el-input
								v-model="form.personname"
								autocomplete="off"
								placeholder="请输入联系人"
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							label="手机号码"
							:label-width="formLabelWidth"
						>
							<el-input
								v-model="form.tel"
								autocomplete="off"
								placeholder="请输入手机号码"
							></el-input>
						</el-form-item>
					</el-col>
					<!-- <el-col :span="12">
            <el-form-item label="固定资产" :label-width="formLabelWidth">
              <el-input
                v-model="form.fixedAmount"
                autocomplete="off"
                placeholder="请输入固定资产"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="净资产" :label-width="formLabelWidth">
              <el-input
                v-model="form.netAssets"
                autocomplete="off"
                placeholder="请输入净资产"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="福利投入" :label-width="formLabelWidth">
              <el-input
                v-model="form.welfareAmount"
                autocomplete="off"
                placeholder="请输入福利投入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="研发费用" :label-width="formLabelWidth">
              <el-input
                v-model="form.researchAmount"
                autocomplete="off"
                placeholder="请输入研发费用"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年缴所得税" :label-width="formLabelWidth">
              <el-input
                v-model="form.yearTax"
                autocomplete="off"
                placeholder="请输入年缴所得税"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机改投入" :label-width="formLabelWidth">
              <el-input
                v-model="form.teachAmount"
                autocomplete="off"
                placeholder="请输入机改投入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="财务年" :label-width="formLabelWidth">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.financeYear"
                style="width: 100%"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="技术投入额" :label-width="formLabelWidth">
              <el-input
                v-model="form.tAmount"
                autocomplete="off"
                placeholder="请输入技术投入额"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="当年融资额" :label-width="formLabelWidth">
              <el-input
                v-model="form.currentAmount"
                autocomplete="off"
                placeholder="请输入当年融资额"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创新奖励" :label-width="formLabelWidth">
              <el-input
                v-model="form.innovateAmount"
                autocomplete="off"
                placeholder="请输入创新奖励"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产学研" :label-width="formLabelWidth">
              <el-input
                v-model="form.iURAmount"
                autocomplete="off"
                placeholder="请输入产学研"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目名称" :label-width="formLabelWidth">
              <el-input
                v-model="form.projectName"
                autocomplete="off"
                placeholder="请输入项目名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目编号" :label-width="formLabelWidth">
              <el-input
                v-model="form.projectNo"
                autocomplete="off"
                placeholder="请输入项目编号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="投资额" :label-width="formLabelWidth">
              <el-input
                v-model="form.investAmount"
                autocomplete="off"
                placeholder="请输入投资额"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年份" :label-width="formLabelWidth">
              <el-date-picker
                type="date"
                placeholder="选择年份"
                v-model="form.teachYear"
                style="width: 100%"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col> -->
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="SetValue()">跳过,直接匹配</el-button>
				<el-button type="primary" @click="SetValue()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import BottomInfo from "../components/BottomInfo";
import TopInfo from "../components/TopInfo";
import TopTabs from "../components/TopTabs";
export default {
	name: "Matching",
	data() {
		return {
			keywords: "",
			options: [],
			loading: false,
			matchingData: [],
			dialogVisible: false,
			//    政策匹配 参数entname,userdata,yearAmount上年度营收，netAssets上年度净资产，
			// researchAmount上年度研发费用，yearTax上年年缴所得税，
			// investAmount上年度备案投资额，currentAmount上年度融资额，
			// iURAmount是否有产学研，staff公司博士以上人才数量，personname联系人，tel手机号码
			form: {
				yearAmount: "",
				netAssets: "",
				researchAmount: "",
				yearTax: "",
				investAmount: "",
				currentAmount: "",
				iURAmount: "",
				staff: "",
				personname: "",
				tel: "",
			},
			formLabelWidth: "160px",
		};
	},
	mounted() {
		//console.log(this.$route.params.Keywords);
		this.keywords = this.$route.params.Keywords;
		if (this.keywords) {
			this.dialogVisible = true;
		}
		// this.SetValue(this.keywords);
		window.onresize = () => {
			console.log("网页窗口变化了");
		};
	},
	methods: {
		remoteMethod(value) {
			//console.log(value);
			this.loading = true;
			this.$axios
				.get("/Ent/GetEntNameByEs", {
					params: {
						key: value,
					},
				})
				.then((res) => {
					//console.log(res);
					this.loading = false;
					this.options = res.data.data;
				})
				.catch((err) => {
					//console.log(err);
				});
		},
		SetValue() {
			//console.log(value);
			// this.keywords = value;
			// this.searchArr = [];
			this.$axios({
				url: "/Policy/GetPolicyMate",
				method: "post",
				data: {
					entname: this.keywords,
					yearAmount: this.form.yearAmount,
					netAssets: this.form.netAssets,
					researchAmount: this.form.researchAmount,
					yearTax: this.form.yearTax,
					investAmount: this.form.investAmount,
					currentAmount: this.form.currentAmount,
					iURAmount: this.form.iURAmount,
					staff: this.form.staff,
					personname: this.form.personname,
					tel: this.form.tel,
					// yearAmount: this.form.yearAmount,
					// fixedAmount: this.form.fixedAmount,
					// netAssets: this.form.netAssets,
					// welfareAmount: this.form.welfareAmount,
					// researchAmount: this.form.researchAmount,
					// yearTax: this.form.yearTax,
					// teachAmount: this.form.teachAmount,
					// financeYear: this.form.financeYear,
					// tAmount: this.form.tAmount,
					// currentAmount: this.form.currentAmount,
					// innovateAmount: this.form.innovateAmount,
					// iURAmount: this.form.iURAmount,
					// teachYear: this.form.teachYear,
					// projectName: this.form.projectName,
					// projectNo: this.form.projectNo,
					// investAmount: this.form.investAmount,
					userdata: this.$cookies.get("userdata"),
				},
				transformRequest: [
					function (data) {
						let ret = "";
						for (let it in data) {
							ret +=
								encodeURIComponent(it) +
								"=" +
								encodeURIComponent(data[it]) +
								"&";
						}
						return ret;
					},
				],
				headers: {
					"Content-Type":
						"application/x-www-form-urlencoded; charset=UTF-8",
				},
			})
				.then((res) => {
					//console.log(res.data.data);
					this.matchingData = res.data.data;
					this.dialogVisible = false;
					this.$cookies.set("MatchingKeyWords", this.keywords);
				})
				.catch((err) => {
					//console.log(err);
				});
		},
		ChangeValue(value) {
			// this.SetValue(value);
			this.dialogVisible = true;
		},
		// handleClose(done) {
		//   this.$confirm("确认关闭？")
		//     .then((_) => {
		//       done();
		//     })
		//     .catch((_) => {});
		// },
		ToMatchingDetail(allData) {
			this.$router.push({ name: "MatchingDetail", params: allData });
			this.$cookies.set("TopActive", 9);
		},
	},
	components: {
		BottomInfo,
		TopInfo,
		TopTabs,
	},
};
</script>

<style scoped>
.matching {
	min-height: 1000px;
}
.content {
	background-color: #f4f6fc;
	padding: 25px 0;
}
.filter-part {
	background-color: #fff;
	box-shadow: 0px 0px 9px 0px rgba(9, 90, 255, 0.05);
	margin: 0 auto;
	width: 1200px;
	padding: 25px;
	box-sizing: border-box;
	padding-bottom: 0;
}
.search-part {
	padding: 30px 280px;
	border-bottom: 1px solid #eeeeee;
}
.search-select {
	width: 100%;
}
.area,
.year {
	padding: 12px 0;
	border-bottom: 1px solid #eeeeee;
	box-sizing: border-box;
	overflow: hidden;
	color: #333;
	font-size: 14px;
}
.year {
	border-bottom: none;
}
.area .title,
.year .title {
	width: 120px;
	text-align: center;
	padding: 5px 8px;
	box-sizing: border-box;
}
.area-list,
.year-list {
	width: 1030px;
}
.area-list li,
.year-list li {
	float: left;
	cursor: pointer;
	margin-right: 20px;
	padding: 5px 8px;
}
.area-list li:last-child,
.year-list li:last-child {
	margin-right: 0;
}
.area-list li.active,
.year-list li.active {
	color: #fff;
	background-color: #095aff;
}
.area-list li:hover,
.year-list li:hover {
	color: #fff;
	background-color: #095aff;
}
.match-count {
	width: 1200px;
	margin: 25px auto;
	height: 50px;
	line-height: 50px;
	background: #ffffff;
	color: #333;
	font-size: 14px;
	text-align: center;
}
.match-count span {
	color: #095aff;
	font-weight: bold;
	margin: 0 5px;
}
.matching-list {
	width: 1200px;
	min-height: 300px;
	background: #ffffff;
	box-shadow: 0px 0px 9px 0px rgba(9, 90, 255, 0.05);
	margin: 0 auto;
	padding: 25px 35px;
	box-sizing: border-box;
}
.matching-list li {
	padding: 25px 30px;
	border-radius: 10px;
	color: #333333;
	font-size: 16px;
	cursor: pointer;
}
.matching-list li:nth-child(2n + 1) {
	background: #f7f7f7;
}
.matching-list li .line1 {
	font-weight: bold;
	font-size: 22px;
	margin-bottom: 20px;
}
.matching-list li .line2 {
	margin-bottom: 10px;
}
.matching-list li .line3 {
	margin-bottom: 10px;
	overflow: hidden;
}
.matching-list li .line4 {
	overflow: hidden;
}
.matching-list li .line4 .star {
	color: #ffd34c;
	font-size: 24px;
	float: right;
}
</style>
